<script setup lang="ts">
import { computed } from 'vue'
import ProgressBar from '@/components/ProgressBar.vue'
import Collapse from '@/components/Collapse.vue'
import { useI18n } from 'vue-i18n'

import type { SkillItem } from '@/types/Skill'

const { tm } = useI18n()
const skillData = computed<SkillItem[]>(() => {
  return tm('skillData')
})
</script>

<template>
  <div class="skill-box">
    <div v-for="item in skillData" :key="item.name">
      <collapse>
        <template v-slot:header>
          <div class="header-info">
            <component :is="item.icon"></component>
            <span class="header-name">{{ item.name }}</span>
            <span class="proficiency">
              <progress-bar :color="item.color" :progress="item.proficiency" />
            </span>
          </div>
        </template>
        <div class="content">
          <p class="content-item" v-for="(i, index) in item.desc" :key="index">
            <em>{{ index + 1 + '.' }}</em>
            <span>{{ i }}</span>
          </p>
        </div>
      </collapse>
    </div>
  </div>
</template>

<style scoped lang="scss">
.skill-box {
  .header-info {
    display: flex;
    align-items: center;
    gap: 18px;
    .proficiency {
      flex: 1;
      max-width: 300px;
    }
    .header-name {
      min-width: 100px;
    }
  }
  .content {
    color: var(--sub-color);
    padding: 15px 20px;
    font-size: 13px;
    .content-item {
      margin-bottom: 5px;
      display: flex;
      align-items: flex-start;
      gap: 6px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style>
